<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import { isAnyFieldEmpty } from "@/utils/emptyCheck";
import { useRouter } from "vue-router";
const router = useRouter();
import { useUserAPI } from "@/services/user";
const userApi = useUserAPI();
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();

import AuthCode from "./components/AuthCode.vue";

enum State {
    PswLogin = 0,
    // CodeLogin = 1, 
    Register = 2,
}
const state = ref<State>(State.PswLogin);
const toggleState = () => {
    state.value = state.value === State.Register ? State.PswLogin : State.Register;
    console.log(state.value);
};

const remember = ref(false)
const loginData = ref({
    aname: "",
    password: "",
    code: "",
    // remember: false,
});
const pswLoginData = computed(() => {
    return {
        aname: loginData.value.aname,
        password: loginData.value.password,
        // remember: loginData.value.remember,
    };
});
// const codeLoginData = computed(() => {
//     return {
//         aname: loginData.value.aname,
//         code: loginData.value.code,
//         // remember: loginData.value.remember,
//     }
// });
// const sendLoginCode = async () => {
//     const aname = loginData.value.aname;
//     const res = await userApi.postLoginCode(aname);
//     if (res.code === 200) {
//         ElMessage.success('验证码已发送');
//     }
// };
const loginByPsw = async () => {
    const aname = loginData.value.aname;
    const password = loginData.value.password;
    const res = await userApi.postLoginByPsw(aname, password)
    if (res.code === 200) {
        ElMessage.success("登录成功");
        userStore.setToken(res.data);
        router.push({
            name:"index"
        });
        return
    }
    ElMessage.error("登录失败");
};
const getLoginCode = (code:string) => {
    loginData.value.code = code
};
const loginByCode = async () => {
    const aname = loginData.value.aname;
    const code = loginData.value.code;
    // const res = await userApi.postLoginByCode(aname, code)
    // if (res.code === 200) {
    //     ElMessage.success("登录成功");
    //     userStore.setToken(res.data.token);
    //     router.push({
    //         name:'index'
    //     });  
    //     return
    // }
    // ElMessage.error("登录失败,账户未注册或验证码输入错误");
    router.push({
        name:'index'
    });  
};
const login = () => {
    loginByPsw();
};

const registerData = ref({
    aname: "",
    password1: "",
    password2: "",
    code: "",
    agree: false,
});

// const getRegisterCode = (code:string) => {
//     registerData.value.code = code;
// };
// const sendRegisterCode = async () => {
//     const aname = registerData.value.aname;
//     const res = await userApi.postRegisterCode(aname);
//     if (res.code === 200) {
//         ElMessage.success('验证码已发送');
//     } else {
//         ElMessage.error(res.message);
//     }
//     if (res.code === 2011) {
//         state.value = State.PswLogin
//     }
// };
const register = async () => {
    const aname = registerData.value.aname;
    if (registerData.value.password1 !== registerData.value.password2) {
        ElMessage.error("两次输入密码不一致");
        return
    }
    const password = registerData.value.password1;
    const code = registerData.value.code;
    const res = await userApi.postRegister(aname, password, code)
    if (res.code === 200) {
        ElMessage.success("注册成功，请登录");
        state.value = State.PswLogin;
    }
};

</script>
<template>
  <div class="w-full h-full fixed t-0 b-0">
    <img src="/src/assets/images/login/bg_login.jpg" alt="" class="fixed t-0 b-0 l-0 r-0">
    <div
        class="absolute left-0 w-[760px] h-full flex flex-col px-[10vw] py-[22vh]"
    >
        <span class="font-bold text-[32px] text-white">
            欢迎{{ state === State.Register ? '注册' : '回到' }}
        </span>
        <span class="font-bold text-[48px] mt-[1vh] text-primary">
            悦享音乐管理平台
        </span>
        <span class="font-bolder text-sm mb-4">
            <span class="text-[#B3B3B3]">
                {{ state === State.Register ? '已有' : '没有' }}账号？
            </span>
            <button 
                class="font-bold text-primary" 
                @click="toggleState">
                立即{{ state === State.Register ? '登录' : '注册' }}
            </button>
        </span>
        <div
            v-if="state !== State.Register"
            class="flex justify-between mb-4 bg-[#EBF0F2] rounded-md text-[#263238] text-sm"
        >
            <button
                class="flex-1 m-1 px-[20px] py-[8px] transition-all duration-300 ease-in-out"
                :class="state === State.PswLogin ? 'bg-white rounded-md font-bold' : '' "
                @click = "state = State.PswLogin"
            >
                密码登录
            </button>
            <!-- <button 
                class="flex-1 m-1 px-[20px] py-[8px] transition-all duration-300 ease-in-out"
                :class="state === State.CodeLogin ? 'bg-white rounded-md font-bold' : '' "
                @click="state = State.CodeLogin"
            >   
                验证码登录
            </button> -->
        </div>
        <div v-if="state !== State.Register" class=" flex flex-col justify-evenly min-h-[300px]">
            <el-input placeholder="请输入用户名" size="large" v-model="loginData.aname"/>
            <el-input 
                v-show = "state === State.PswLogin" 
                show-password
                placeholder="请输入密码" size="large" 
                v-model = "loginData.password"/>
            <span class="flex justify-between text-sm text-[#B3B3B3]">
                <span class="flex items-center">
                    <el-checkbox v-model="remember"/>
                    <button class="ml-1">记住账号</button>
                </span>
                <button v-if="state === State.PswLogin" class="flex items-center">忘记密码？</button>
            </span>
            <el-button 
                type="primary" size="large"
                :disabled="state === State.PswLogin ? isAnyFieldEmpty(pswLoginData) : isAnyFieldEmpty(codeLoginData)"
                @click="login"
            >
                登陆
            </el-button>
        </div>
        <div v-else class="register flex flex-col justify-between min-h-[430px]">
            <el-form
                label-position="top"
                label-width="auto"
                :model="registerData"
            >
                <el-form-item label="用户名">
                    <el-input placeholder="请输入用户名" size="large" v-model="registerData.aname"/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input show-password placeholder="请输入6-12位密码" size="large" v-model = "registerData.password1"/>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input show-password placeholder="请再次输入密码" size="large" v-model = "registerData.password2"/>
                </el-form-item>
                <!-- <el-form-item label="验证码">
                    <AuthCode 
                        class="w-full" 
                        :aname = "registerData.aname" 
                        @sendCode = " sendRegisterCode" 
                        @getCode = "getRegisterCode"
                    />
                </el-form-item> -->
                <span class="flex justify-between text-sm text-[#B3B3B3]">
                    <span class="flex items-center">
                        <el-checkbox v-model="registerData.agree"/>
                        <span class="ml-1">
                            我已阅读并同意
                            <button>
                                <span class="text-primary">《服务条款》</span>
                            </button>
                            和
                            <button>
                                <span class="text-primary">《隐私政策》</span>
                            </button>
                        </span>
                    </span>
                </span>
            </el-form>
            <el-button 
                type="primary" size="large" @click="register">
                注册
            </el-button>
        </div>
    </div>
  </div>
</template>
<style lang="scss">
.bg {
  background: url("/src/assets/images/login/bg_login.jpg") no-repeat center;
  background-size: 100%;
}
.font {
  font-family: Plus Jakarta Sans;
}
.register .el-form-item__label{
    color: white !important;
    font-size: 15px;
    letter-spacing: 1px;
    margin-bottom: 6px !important;
}
</style>